<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>hello world</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>


    <div id="zj1">
        <ol>
            <!-- 创建一个 todo-item 组件的实例 -->
            <todo-item></todo-item>
        </ol>
    </div>

    <div id="app-7">
            <ol>
                <!--
                    现在我们为每个 todo-item 提供 todo 对象
                    todo 对象是变量，即其内容可以是动态的。
                    我们也需要为每个组件提供一个“key”，稍后再
                    作详细解释。
                  -->
                <todo-item2 v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item2>
            </ol>
        </div>

    <script>
        // 定义名为 todo-item 的新组件
        Vue.component('todo-item', {
            template: '<li>测试下</li>'
        })

        var app = new Vue({
            el: '#zj1'
        })

        // 定义名为 todo-item 的新组件
        Vue.component('todo-item2', {
            // todo-item 组件现在接受一个
            // "prop"，类似于一个自定义特性。
            // 这个 prop 名为 todo。
            props: ['todo'],
            template: '<li>{{ todo.text }}</li>'
        })

        var app7 = new Vue({
            el: '#app-7',
            data: {
                groceryList: [
                    { id: 0, text: '蔬菜' },
                    { id: 1, text: '奶酪' },
                    { id: 2, text: '随便其它什么人吃的东西' }
                ]
            }
        })
    </script>
</body>

</html>